<template>
  <div class="sub-form-wrapper" @click="handleSelectCol(field)">
    <a-card :title="field.label">
      <RenderFormFieldList
        :layout-config="layoutConfig"
        :field="field"
        @selectField="handleSelectCol"
      />
    </a-card>
  </div>
</template>

<script setup>
import RenderFormFieldList from "./RenderFormFieldList.vue";

const props = defineProps({
  layoutConfig: { type: Object, default: () => ({}) },
  field: { type: Object, default: () => ({}) },
});

const emits = defineEmits(["selectField"]);

function handleSelectCol(record) {
  emits("selectField", record);
}
</script>

<style scoped lang="less">
.sub-form-wrapper {
  ::v-deep {
    .el-card__body {
      padding: 10px;
    }
  }
}
.col-wrapper {
  padding-top: 5px;
  &:hover {
    background: #f6f7ff;
  }
  &.selected {
    background: #f6f7ff;
  }
}
.draggable-wrapper {
  width: 100%;
  &.outer {
    height: 100%;
  }
}
.drag-item {
  position: relative;
  &.selected {
    position: relative;
    border: 1px solid #409eff;
    .el-icon-drag {
      position: absolute;
      top: -5px;
      left: -5px;
      width: 20px;
      height: 20px;
      background: #409eff;
    }
    // &::before {
    //   content: "";
    //   position: absolute;
    //   top: -1px;
    //   left: -1px;
    //   width: 25px;
    //   height: 25px;
    //   background: #409eff;
    //   cursor: move;
    // }
  }
}
</style>
